{% extends "base.html" %} {% load static %} {% block extra_head %}
<!-- <script src="{% static 'js/axios.min.js'%}"></script> -->
<script src="{% static 'js/echarts.js'%}"></script>
<link rel="stylesheet" href="{% static 'css/tma_demo.css' %}" />
{% endblock extra_head %} {% block main %} {% if user.is_authenticated %}
<div class="w-100 h-100 d-flex vue_tma_demo">
  <div class="mt-2" id="chart"></div>

  <div class="mt-1 ms-2">
    <div>
      <div class="d-flex mt-1">
        <div class="input-group" style="width: 210px">
          <span class="input-group-text" id="basic-input-01"
            >敌艇初始距离(nm)</span
          >
          <input
            :class=""
            v-model="target_init_distance"
            class="form-control"
            aria-describedby="basic-input-01"
          />
        </div>
        <div class="ms-1 input-group" style="width: 194px">
          <span class="input-group-text" id="basic-input-01"
            >敌艇初始真方位</span
          >
          <input
            :class=""
            v-model="target_init_bearing"
            class="form-control"
            aria-describedby="basic-input-01"
          />
        </div>
      </div>

      <div class="d-flex mt-1">
        <div class="input-group" style="width: 210px">
          <span class="input-group-text" id="basic-input-01"
            >航行时长(分钟)&nbsp&nbsp&nbsp&nbsp&nbsp
          </span>
          <input
            :class=""
            v-model="duration"
            class="form-control"
            aria-describedby="basic-input-01"
          />
        </div>

        <div class="ms-1 input-group" style="width: 194px">
          <span class="input-group-text" id="basic-input-01"
            >观察间距(分钟)&nbsp</span
          >
          <input
            :class=""
            v-model="observe_interval"
            class="form-control"
            aria-describedby="basic-input-01"
          />
        </div>
      </div>

      <div class="d-flex mt-1">
        <div
          class="ps-2 me-1 pt-2 border rounded"
          style="width: 137px; background-color: rgb(219, 228, 232)"
        >
          本艇运动参数
        </div>

        <div class="input-group" style="width: 140px">
          <span class="input-group-text" id="basic-input-01">速度(节)</span>
          <input
            :class=""
            v-model="own_sub.speed"
            class="form-control"
            aria-describedby="basic-input-01"
          />
        </div>

        <div class="ms-2 input-group" style="width: 120px">
          <span class="input-group-text" id="basic-input-01">航向</span>
          <input
            :class=""
            v-model="own_sub.course"
            class="form-control"
            aria-describedby="basic-input-01"
          />
        </div>
      </div>

      <div class="d-flex mt-1">
        <div
          class="ps-2 pt-2 me-1 border rounded"
          style="width: 137px; background-color: rgb(219, 228, 232)"
        >
          敌艇运动参数
        </div>

        <div class="input-group" style="width: 140px">
          <span class="input-group-text" id="basic-input-01">速度(节)</span>
          <input
            :class=""
            v-model="target_sub.speed"
            class="form-control"
            aria-describedby="basic-input-01"
          />
        </div>

        <div class="ms-2 input-group" style="width: 120px">
          <span class="input-group-text" id="basic-input-01">航向</span>
          <input
            :class=""
            v-model="target_sub.course"
            class="form-control"
            aria-describedby="basic-input-01"
          />
        </div>
      </div>
      <div class="d-flex mt-1">
        <button
          @click="update"
          type="button"
          :class="[data_input_valid ? 'bg-primary': 'bg-danger']"
          class="text-light btn me-auto"
          :disabled="! data_input_valid"
        >
          [[ btn_msg ]]
        </button>
      </div>
    </div>

    <br />
    <br />
    <br />
    <span class="h3 ekelund mt-2">Single-leg Ekelund Ranging</span>
    <div class="h5 mt-2 ms-4">
      <span class="text-danger">Range(nm)</span> &asymp;
      <span class="text-primary"> total speed across the LOS(Kn) </span>
      &divide;
      <span class="text-success">Bearing rate(degree/min)</span>
    </div>
    <div class="mt-2">
      <!-- <img src="/media/single-leg-ekelund-n.jpg" alt="" class="" width="600" /> -->
      <img src="/media/tutorial/tma-demo-01.png" alt="" class="" />
    </div>
  </div>
  <script src="{% static 'js/tma_demo.js' %}"></script>
</div>
{% else %} {% include "pcs_login.html" %} {% endif %} {% endblock %}
